@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

.conversation_container .react-input-emoji--container {
  background: transparent;
  border: 0;
  margin-left: 0;
  font-size: 16px;
  font-weight: 300;
  font-family: inherit;
  color: #fff;
}

.conversation_container .react-emoji {
  background: transparent;
  border-radius: 12px;
  height: 42px;
}

.conversation_container .react-input-emoji--button {
  position:absolute;
  top: 42px;
  left: 52px;
  height: 40px;
  width: 40px;
  padding: 0 8px;
  border-radius: 20px;
}

.conversation_container .react-input-emoji--button:hover {
  background: rgba(63,63,70,0.4);
}

.journal_mode .react-input-emoji--button {
  position: relative;
  top: auto;
  left: auto;
}

.conversation_container .react-input-emoji--input {
  font-weight: 300;
}

.conversation_container .react-emoji-picker--wrapper {
  left: 0;
}
